﻿@page "/tree-grid/selection-api"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

@*Hidden:Lines*@
@using BlazorDemos
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
 <p>  This sample demonstrates the selection functionality of the Tree Grid. You can select multiple row by entering start and end index then click the select row button. To clear all selected rows, click clear selection button.</p>   
</SampleDescription>
<ActionDescription>
 <p>Selection provides an interactive support to highlight the row or cell that you select. Selection can be done through a simple Mouse down or Keyboard interaction. To enable selection, set <code> AllowSelection</code> as true. </p>
<p>Tree Grid supports two types of selection which can be set using the <code>TreeGridSelectionSettings->type </code> property. They are,</p>
    <ul>
        <li><code>single</code> - Enabled by default. Allows the user to select single row/cell at a time.</li>
        <li><code>multiple</code> - Allows the user to select more than one row/cell at a time.</li>
    </ul>
    <p>Also, supports three modes of selection which can be set using the <code>TreeGridSelectionSettings->mode </code> property. They are,</p>
    <ul> <li><code>Row</code> - Enabled by default. Enables row selection in Tree Grid.</li>
         <li><code>Cell</code> - Enables cell selection in Tree Grid.</li>
         <li><code>Both</code> - Enables both row and cell selection in Tree Grid. Clicking any cell will select both the row and cell simultaneously.</li>
    </ul>
    <p>The Tree Grid supports two types of cell selection mode that can be set by using the <code> TreeGridSelectionSettings->CellSelectionMode </code> property. They are,</p>
       <ul><li><code>Flow</code> - The Flow value is set by default. The range of cells are selected between the start index and end index that includes in between cells of rows.</li>
            <li><code>Box</code> - Range of cells are selected from the start and end column indexes that includes in between cells of rows within the range.</li></ul>
        <p>To perform the multi-selection, hold <strong>CTRL</strong> key and click the desired rows/cells. To select range of rows/cells, hold <strong>SHIFT</strong> key and click the rows/cells.</p>
        <p>While using the Tree Grid in a touch device environment, there is an option for multi-selection through single tap on the row and it will show a popup with the multi-selection symbol. Tap the icon to enable multi-selection in a single tap.</p>
         <p>In this demo, you can select the multiple rows by holding the CTRL Key and clicking the desired rows.</p>
        <p> More information on the selection configuration can be found in the <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/selection/'>documentation </a> section.</p>  
</ActionDescription>


<div class="col-lg-9 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" Height="315" AllowPaging="true" AllowSelection="true">
                <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple" Mode="Syncfusion.Blazor.Grids.SelectionMode.Row"></TreeGridSelectionSettings>
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="170"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="100"></TreeGridColumn>

                </TreeGridColumns>
            </SfTreeGrid>

        </div>
    </div>
</div>

<div class="col-lg-3 property-section">
    <h4 style="margin-top:38px;">Properties</h4>

    <table id="property" style="width: 73%; height: 300px;">
        <tr>
            <td class="left-side" style="padding-right:15px;"><b>Select Rows</b></td>
        </tr>
        <tr>
            <td class="left-side" style="padding-right:15px;">Start</td>
            <td>
                <SfNumericTextBox @ref="Start" TValue="int" Min="0" Format="##"></SfNumericTextBox>
            </td>
        </tr>
        <tr>
            <td class="left-side" style="padding-right:15px;">To</td>
            <td>
                <SfNumericTextBox @ref="To" TValue="int" Min="1" Format="##"></SfNumericTextBox>
            </td>
        </tr>
        <tr>
            <td class="left-side" style="padding-right:15px;"><b>Select Row</b></td>
            <td>
                <SfButton OnClick="Select" IsPrimary="true">Select Row</SfButton>
            </td>
        </tr>
        <tr>
            <td class="left-side" style="padding-right:15px;"><b>Clear Selection</b></td>
            <td>
                <SfButton OnClick="Clear" IsPrimary="true">Clear Selection</SfButton>
            </td>
        </tr>
    </table>
</div>

@code{

    SfTreeGrid<SelfReferenceData> TreeGrid;

    SfNumericTextBox<int> Start;

    SfNumericTextBox<int> To;

    public List<double> Rows { get; set; } = new List<double>();

    public List<SelfReferenceData> TreeGridData { get; set; }


    public async void Select(MouseEventArgs Args)
    {

        int StartRow = this.Start.Value;
        int ToRow = this.To.Value;
        if (ToRow < StartRow)
        {
            int Swap = ToRow;
            ToRow = StartRow;
            StartRow = Swap;
        }
        for (int i = StartRow; i <= ToRow; i++)
        {
            this.Rows.Add(i);
        }

        await this.TreeGrid.SelectRowsAsync(Rows.ToArray());
        this.Rows.Clear();

    }

    public async void Clear(MouseEventArgs Args)
    {
        await this.TreeGrid.ClearSelectionAsync();
        this.Rows.Clear();
    }


    protected override void OnInitialized()
    {
        this.TreeGridData = SelfReferenceData.GetTree().ToList();
    }
}
